<template>
	<div class="dict_type">
		<el-form class="search_form" :model="payload" label-width="80px">
			<el-row>
				<el-col :span="6">
					<el-form-item label="字典名称">
						<el-input v-model="payload.dictName" placeholder="字典名称" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="字典类型">
						<el-input v-model="payload.dictType" placeholder="字典类型" />
					</el-form-item>
				</el-col>
				<el-col :span="12" class="search_buttons">
					<el-button type="primary" @click="queryDictType">搜索</el-button>
					<el-button @click="resetPayload">重置</el-button>
				</el-col>
			</el-row>
		</el-form>

		<ContentTable
			v-bind="tableConfig"
			v-model:page="page"
			:data="tableData"
			:total="total"
			:page-change="queryDictType"
		>
			<template #toolbar>
				<el-button type="primary" @click="handleAddClick">新 建</el-button>
			</template>
			<template #handler="{ row }">
				<el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
				<el-button type="primary" size="small" @click="handleDrawerOpen(row)">字典项</el-button>
				<el-button type="danger" size="small" @click="handleDel(row)">删除</el-button>
			</template>
		</ContentTable>

		<!-- 新建/编辑 -->
		<el-dialog v-model="dialogVisible" :title="title" width="400" :before-close="handleClose">
			<el-form ref="formRef" :model="formData" :rules="rulesType" label-width="90px">
				<el-form-item label="字典名称" prop="dictName">
					<el-input v-model="formData.dictName" placeholder="请输入字典名称" />
				</el-form-item>
				<el-form-item label="字典类型" prop="dictType">
					<el-input v-model="formData.dictType" placeholder="请输入字典类型" />
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="formData.remark" type="textarea" rows="3" maxlength="500" show-word-limit />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" @click="submit">确 认</el-button>
				<el-button @click="handleClose">取 消</el-button>
			</template>
		</el-dialog>

		<!-- 字典数据 -->
		<DataDrawer ref="drawerRef" :dict-type="dictType" />
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { selectDictType, insertDictType, updateDictType, deleteDictType } from '@/service/system/dict'
import ContentTable from '@/components/ContentTable'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tableConfig, rulesType } from './config'
import DataDrawer from './DataDrawer.vue'

const payload = ref<any>({})
const tableData = ref([])
const total = ref(0)
const page = ref({ pageNum: 1, pageSize: 10 })
async function queryDictType() {
	const result = await selectDictType({ ...page.value, ...payload.value })
	tableData.value = result.list
	total.value = result.total
}
queryDictType()
function resetPayload() {
	payload.value = {}
	queryDictType()
}
// watch(page, queryDictType)

const formData = ref<any>({})
const dialogVisible = ref(false)
const title = ref('')
const dictType = ref('')
const formRef = ref()
const drawerRef = ref()

function handleEdit(row: any) {
	for (const key of ['id', 'dictName', 'dictType', 'remark']) {
		formData.value[key] = row[key]
	}
	dialogVisible.value = true
}
function handleDrawerOpen(row: any) {
	dictType.value = row.dictType
	drawerRef.value.drawer = true
}
function handleAddClick() {
	title.value = '新建'
	dialogVisible.value = true
}
function handleDel(row: any) {
	ElMessageBox.confirm('确认删除此数据？', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(async () => {
			await deleteDictType(row.id)
			ElMessage.success('删除成功')
			queryDictType()
		})
		.catch(() => {})
}
function handleClose() {
	dialogVisible.value = false
	formData.value = {}
	formRef.value.resetFields()
}
// 提交
function submit() {
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			if (formData.value.id) {
				await updateDictType(formData.value)
				ElMessage.success('编辑成功')
				handleClose()
				queryDictType()
			} else {
				await insertDictType(formData.value)
				ElMessage.success('新建成功')
				handleClose()
				queryDictType()
			}
		}
	})
}
</script>

<style scoped></style>
